<template>
  <div class="sort">
    <!-- 搜索栏 start -->
    <div class="header-search">
      <van-search
        v-model="keyword"
        show-action
        placeholder="请输入搜索关键词"
        background="#c82519"
        class="search"
        disabled
      >
        <!-- <template #left-icon>
          <img :src="$img.zk" alt="">
        </template> -->
        <template #action>
          <div class="loginbtn">登录</div>
        </template>
      </van-search>
    </div>
    <!-- 搜索栏 end -->

    <!-- 分类列表 start -->
    <div class="gp-sort">
      <!-- 左边侧边栏 -->
      <div class="sort-left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item v-for="item in cates" :key="item._id" 
          :title="item.cate_zh"
          />
        </van-sidebar>
      </div>
      <!-- 右边侧边栏 -->
      <div class="sort-right">
        <van-grid :column-num="3" :border="false">
          <van-grid-item v-for="item in cache[activeKey]" :key="item._id" >
            <div><img :src="$img.imgServe + item.img" alt=""></div>
            <div class="text" v-text="item.name"></div>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <!-- 分类列表 end -->

    <Tabbar/>
  </div>
</template>

<script>
import { Tabbar } from '@/components'
import { mapState, mapActions, mapMutations } from 'vuex'

export default {
  name: 'Sort',
  data() {
    return {
      keyword: '',
      activeKey: 0,
      cates: [],
    }
  },

  components: {
    Tabbar
  },

  computed: {
    ...mapState('goods', ['cache']),
    payload () {
      // 给action方法使用
      return {
        // { k: 0, cate: digital }
        // { k: 1, cate: office }
        // { k: 2, cate: electrical }
        // { k: 3, cate: beauty }
        k: this.activeKey,
        cate: this.cates[this.activeKey].cates
      }
    }
  },

  watch: {
    activeKey () {
      // 当用户点击不同的类型的商品时，被点击过的类型不会再次发起请求
      if (!this.cache[this.activeKey]) {
        this.getGoodsOfCate(this.payload)
      }
    }
  },

  methods: {
    ...mapActions('goods', ['getGoodsOfCate']),
    ...mapMutations('goods', ['clearCache'])
  },

  // 分类列表渲染数据
  /* async mounted () {
    const res = await this.$api.getCategory({})
    this.cates = res.list
    // this.$store.dispatch() === this.getGoodsOfCate()

    this.getGoodsOfCate(this.payload)
  },

  beforeDestroy () {
    this.clearCache()
  }, */

  // 被 keep-alive 缓存的组件激活时调用
  async activated () {
    const res = await this.$api.getCategory({})
    this.cates = res
    // 这里采用了状态管理的方法保存缓存
    this.getGoodsOfCate(this.payload)
  },

  deactivated () {
    this.clearCache()
  }

}
</script>

<style lang="scss" scoped>
  .sort {
    width: 100%;
    height: 100%;
  }
  .header-search {
    width: 10rem;
    height: 1.466667rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    .loginbtn {
      color: #fff;
    }
  }

  .gp-sort {
    width: 10rem;
    height: 15.333333rem;
    padding-top: 1.466667rem;
    display: flex;
    .sort-left {
      width: 2.266667rem;
      height: 100%;
      background-color: #fff;
      overflow: auto;
    }
    .sort-right {
      width: 7.733333rem;
      overflow: hidden;
      img {
        width: 1.733333rem;
        height: 1.733333rem;
      }
      .text {
        font-size: .373333rem;
        color: #333;
      }
    }
  }
</style>